<template>
  <div id="Left">
    <span
      v-for="(item, index) in resData"
      :key="index"
      @click="fn(index)"
      :class="{ active: index == num }"
    >
      {{ item.titName }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  props: {
    resData: {
      type: Array, // 类型
      required: true, // 是否必须
      default: () => {
        // 返回值
        return [];
      },
    },
  },
  methods: {
    fn(index) {
      this.num = index;
      this.$bus.$emit("sendIndex", this.num);
    },
    
  },
  mounted() {
    this.$bus.$on("resIndex", (index) => {
      this.num = index;
    });
  },
};
</script>

<style scoped>
#Left {
  display: flex;
  flex-direction: column;
}
#Left span {
  flex: 1;
  width: 100%;
  text-align: center;
  line-height: 0.66rem;
}
.active {
  background: cornflowerblue;
}
</style>